<template>
  <div class="df fdc jcc notice-outer">
    <p class="hh-64 boxs pdl-32 fl-center pointer" @click="$router.push('/data/schedule')">
      <icon-font type="icon-arrowleft"></icon-font>
      <span class="pdl-8">返回</span>
    </p>
    <div class="pdl-32" style="width: 480px">
      <p class="pdt-24 pdb-22 fs-18 font333 bold">{{
        $route.query.id ? '编辑课表' : '新增课表'
      }}</p>
      <a-form ref="formRef" :model="modelRef" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="校区名称" :rules="rules.school" name="school">
          <a-input v-model:value="modelRef.school" placeholder="请输入"></a-input>
        </a-form-item>
        <a-form-item label="教室名称" :rules="rules.classroom" name="classroom">
          <a-input v-model:value="modelRef.classroom" placeholder="请输入"></a-input>
        </a-form-item>
        <a-form-item label="楼号" :rules="rules.classNo" name="classNo">
          <a-input v-model:value="modelRef.classNo" placeholder="请输入"></a-input>
        </a-form-item>
        <a-form-item label="教师姓名" :rules="rules.teacher" name="teacher">
          <a-input v-model:value="modelRef.teacher" placeholder="请输入"></a-input>
        </a-form-item>
        <a-form-item label="学年" :rules="rules.year" name="year">
          <a-select v-model:value="modelRef.year" placeholder="请选择">
            <a-select-option :value="1">1年</a-select-option>
            <a-select-option :value="2">2年</a-select-option>
            <a-select-option :value="3">3年</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="学期" :rules="rules.period" name="period">
          <a-select v-model:value="modelRef.period" placeholder="请选择">
            <a-select-option :value="1">1学期</a-select-option>
            <a-select-option :value="2">2学期</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="上课时间" :rules="rules.time" name="time">
          <div>
            <div class="df aic">
              <a-date-picker
                v-model:value="modelRef.time"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                placeholder="请选择"
              />
              <a-select v-model:value="modelRef.once" placeholder="请选择" class="ml-8">
                <a-select-option :value="1">第一节课</a-select-option>
                <a-select-option :value="2">第二节课</a-select-option>
              </a-select>
            </div>
            <div class="df aic font999 mt-8">
              <icon-font type="icon-question-circle"></icon-font>
              <p class="pdl-8">该课程人数已满</p>
            </div>
          </div>
        </a-form-item>
        <a-form-item label="节次" :rules="rules.frequency" name="frequency">
          <a-input v-model:value="modelRef.frequency" placeholder="请输入"></a-input>
        </a-form-item>
        <a-form-item label="课程名称" :rules="rules.course" name="course">
          <a-input v-model:value="modelRef.course" placeholder="请输入"></a-input>
        </a-form-item>
      </a-form>
    </div>
    <div class="mta notice-bottom df jcc pdt-16">
      <a-button class="mr-24" @click="$router.push('/system/account')">取消</a-button>
      <a-button type="primary" :loading="confirmLoading" @click="submit">确定</a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import iconFont from '@/components/iconfont/icon-font'
  import { postUpdateNotice, postAddNotice } from '@/api/system/index'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      iconFont,
    },
    setup() {
      const formRef = ref<any>(null)

      const router = useRouter()

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        confirmLoading: false,
      })

      const modelRef = reactive({
        school: null,
        classroom: null,
        classNo: null,
        teacher: null,
        year: null,
        period: null,
        time: '',
        once: null,
        frequency: null,
        course: null,
      })

      const rules = {
        school: [
          {
            required: true,
            message: '请输入校区',
          },
        ],
        classroom: [
          {
            required: true,
            message: '请输入教室',
          },
        ],
        classNo: [
          {
            required: true,
            message: '请输入楼号',
          },
        ],
        teacher: [
          {
            required: true,
            message: '请输入教师',
          },
        ],
        year: [
          {
            required: true,
            message: '请选择年份',
          },
        ],
        period: [
          {
            required: true,
            message: '请选择学期',
          },
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
          },
        ],
        frequency: [
          {
            required: true,
            message: '请输入次数',
          },
        ],
        course: [
          {
            required: true,
            message: '请输入课程',
          },
        ],
      }

      /**
       * @description 加载表格数据
       */

      onMounted(async () => {
        // formRef.value.validate()
      })

      const submit = async () => {
        console.log(modelRef.time)
        state.confirmLoading = true
        try {
          await formRef.value.validate()
          const params = { ...modelRef }
          console.log(params)
          const id = route.query.id
          console.log(params)
          await (id
            ? postUpdateNotice(Object.assign(params, { id: id }))
            : postAddNotice(params)
          ).finally(() => (state.confirmLoading = false))
          router.push('/system/account')
        } catch (error) {
          console.log('error', error)
          state.confirmLoading = false
        }
      }

      return {
        ...toRefs(state),
        formRef,
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        modelRef,
        rules,
        submit,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .notice-outer {
    height: 100%;
  }

  .notice-bottom {
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.05);
  }
</style>
